<template>
  <div v-if="Object.keys(income).length > 0" class="container">
    <div class="income-info with-grey-bottom-border">
      <div
        class="img"
        :style="{ background: income.status === 1 ? '#0078FF' : '#F85859' }"
      >
        <img src="@/assets/vip-assets/红包 拷贝 2.png" alt="" />
      </div>
      <div class="title">
        {{ income.status === 1 ? "推荐奖励" : "购物奖励" }}
      </div>
      <div class="money">+{{ income.bonus }}</div>
    </div>
    <div class="income-detail">
      <div class="detail-cell">
        <div class="header">当前状态</div>
        <div class="text">{{ income.is_give }}</div>
      </div>
      <div class="detail-cell">
        <div class="header">收款时间</div>
        <div class="text">{{ income.created_at }}</div>
      </div>
      <div class="detail-cell">
        <div class="header">订单交易</div>
        <div class="text">{{ income.order_no }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getIncomeList } from "@/api/vip";
export default {
  data() {
    return {
      income: {}
    };
  },
  created() {
    if (this.$route.query.id) {
      getIncomeList({ id: this.$route.query.id }).then(res => {
        if (res.status === 200) {
          this.income = res.data.data;
        }
      });
    } else {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  background: #fff;
  font-size: 0.56rem;
  color: #444444;
  .income-info {
    height: 6.6rem;
    text-align: center;
    padding: 1.4rem 0 1rem;
    .img {
      height: 2rem;
      width: 2rem;
      border-radius: 50%;
      display: inline-block;
      text-align: center;
      vertical-align: top;
      line-height: 2rem;
      img {
        width: 0.84rem;
        height: 1rem;
        vertical-align: middle;
      }
    }
    .title {
      margin: 0.4rem 0 0.5rem;
    }
    .money {
      font-size: 0.84rem;
    }
  }
  .income-detail{
    padding: 0.8rem 3.2% 0;
    .detail-cell{
      display: flex;
      height: 1.5rem;
      line-height: 1.5rem;
      .header{
        color:#999999;
        padding-right: 0.64rem;
      }
    }
  }
}
</style>
